<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">贴标</div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-md" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <!--成功提示-->
    <q-banner class="text-white bg-green q-mb-md" dense inline-actions v-if="serverSuccessMessage">
      {{ serverSuccessMessage }}
      <template v-slot:action>
        <q-btn @click="serverSuccessMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <div class="row q-col-gutter-sm col-12">
      <div class="col-12">
        <q-icon color="red" name="fas fa-asterisk" size="10px" />
        <span>箱号</span>
        <easy-input :disable="submittingState" ref="caseId" v-model="$d.caseId" @focus="fx.ui.select"
          :error="v$.caseId.$error" :error-message="e$(v$.caseId.$errors)"/>
      </div>
      <div class="col-12">
        <q-btn class="full-width" color="primary" label="确定贴标" @click="doLabeling" :loading="submittingState" />
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'PackLabelingStd'
}
</script>
<script lang="ts" setup>

import {computed, nextTick, reactive, ref} from 'vue'
import {QInput} from 'quasar'
import useVuelidate from '@vuelidate/core'
import {playErrorSound, playSuccessSound} from '@njt/wms/helper/audio'

let serverErrorMessage = ref('')
let serverSuccessMessage = ref('')
let submittingState = ref(false)

const $d = reactive({
  caseId: ''
})

const validators = $f.validators
const rules = {
  caseId: {
    required: validators.required
  }
}
const v$ = useVuelidate(rules, computed(() => $d), {$autoDirty: true})

const doLabeling = function () {
  serverErrorMessage.value = ''
  serverSuccessMessage.value = ''
  void v$.value.$validate()
    .then((valRes) => {
      if (valRes) {
        submittingState.value = true
        $f.axios
          .post('/wms/work/order/do-labeling/'+$d.caseId)
          .then(() => {
            serverSuccessMessage.value = `贴标成功:${$d.caseId}`
            playSuccessSound()
          })
          .catch((err) => {
            playErrorSound()
            serverErrorMessage.value = $f.getAxiosErrMsg(err)
          })
          .finally(() => {
            submittingState.value = false
            $d.caseId = ''
            void nextTick(() => {
              caseId.value && caseId.value.focus()
              v$.value.$reset()
            })
          })
      } else {
        playErrorSound()
      }
    })
}

const caseId = ref<QInput | null>(null)
const fx = $f
const e$ = $f.getFieldErrStr

</script>

<style scoped>

</style>
